<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <dv-decoration-8 style="width:25%;height:40px;" />
        <span class="fs-xl text mx-2" style="width:50%;height:40px;font-size:30px;display: inline-block;line-height: 40px;text-align: center">{{title}}</span>
        <dv-decoration-8 :reverse="true" style="width:25%;height:40px;" />
      </div>
      <div class="d-flex ai-center flex-column body-box">
        <dv-active-ring-chart :config="config" style="width:600px;height:400px" />
      </div>
    </div>
  </div>
</template>

<script>

import { linesHoursStatic, linesDailyStatic } from '@/api/yield'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.extend(customParseFormat)

export default {
  data() {
    return {
      title: '昨日 一线 不良率统计',
      lineNum: 1,
      timing1: null,
      timing2: null,
      config: {},
      currentFinalAllData: [],
      currentFinalData: [
        { name: '长泡不良', value: 3 },
        { name: '圆泡不良', value: 3 },
        { name: '结石不良', value: 3 },
        { name: '上开口不良', value: 3 },
        { name: '压延不良', value: 2 },
        { name: '其他不良', value: 1 }
      ]
    }
  },
  watch: {
    currentFinalData: {
      handler(newData) {
        this.config = {
          data: newData,
          radius: '60%',
          activeRadius: '65%',
          lineWidth: 35,
          digitalFlopStyle: {
            fontSize: 20,
            // 以下都不成立 todo!!!
            marginTop: 20,
            fontVarient: 'normal'
            // fill: '#fff'
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.getYieldDayCal()
    this.timeFn2()
    this.timeFn1()
  },
  beforeDestroy() {
    clearInterval(this.timing1)
    clearInterval(this.timing2)
  },
  methods: {
    // 小时报版本 1小时
    getYieldCalOld() {
      const queryStaticsParams = {}
      let line24Statics = []
      const currentTime = new Date()
      const yieldSort = 'ASC'
      // 先做5天版本
      line24Statics[0] = dayjs(currentTime).subtract(1, 'hour').format('YYYYMMDDHH0000') // 实际时间
      line24Statics[1] = dayjs(currentTime).subtract(1, 'hour').format('YYYYMMDDHH5959') // 实际时间
      line24Statics = ['20250520160000', '20250520165959'] // 测试时间 todo 生产端需注释
      let currentFinalData = []
      const meltingDefectRate = []
      const calenderingDefectRate = []
      const cuttingDefectRate = []
      const otherDefectRate = []

      linesHoursStatic(this.addParam((this.addDateRange(queryStaticsParams, [line24Statics[0], line24Statics[1]])), 'sort', yieldSort)).then(response => {
        currentFinalData = response.data.reduce(function(acc, cur) {
          // 不良率计算
          meltingDefectRate.push(Number((cur.longBubbleSquare + cur.roundBubbleSquare + cur.stoneSquare + cur.aOpenBubbleSquare) / cur.pullingSquare * 100))
          calenderingDefectRate.push(Number((cur.clutterSquare + cur.bOpenBubbleSquare + cur.compressioSuqare + cur.deformationSquare) / cur.pullingSquare * 100))
          cuttingDefectRate.push(Number(cur.yieldSquare / cur.pullingSquare * 100))
          otherDefectRate.push(Number(cur.otherSquare / cur.pullingSquare * 100))
          return acc
        }, [])

        const meltingDefectRateData = meltingDefectRate.reduce((acc, cur) => acc + cur, 0) / meltingDefectRate.length
        const calenderingDefectRateData = calenderingDefectRate.reduce((acc, cur) => acc + cur, 0) / calenderingDefectRate.length
        const cuttingDefectRateData = cuttingDefectRate.reduce((acc, cur) => acc + cur, 0) / cuttingDefectRate.length
        const otherDefectRateData = otherDefectRate.reduce((acc, cur) => acc + cur, 0) / otherDefectRate.length

        const finalData = [
          { name: '熔解不良率', value: Number(meltingDefectRateData.toFixed(1)) },
          { name: '压延不良率', value: Number(calenderingDefectRateData.toFixed(1)) },
          // { name: '裁切不良率', value: Number(cuttingDefectRateData.toFixed(1)) },
          { name: '其他不良率', value: Number(otherDefectRateData.toFixed(1)) }
        ]

        this.currentFinalData = finalData
      })
    },
    // 日报版本 昨日
    getYieldDayCal() {
      const queryStaticsParams = {}
      let line24Statics = []
      const currentTime = new Date()
      // const yieldSort = 'DESC'
      const yieldSort = 'ASC'
      // 开始时间8点包含当天 结束时间8点不包含当天
      const thisTime = Number(dayjs(currentTime).format('HH'))
      line24Statics = ['2025-05-21 08:00:00', '2025-05-22 08:00:00'] // 测试时间 todo 生产端需注释
      if (thisTime >= 8) {
        // 情况1 昨日班报已出
        line24Statics[0] = dayjs(currentTime).subtract(1, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
        line24Statics[1] = dayjs(currentTime).format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
      } else {
        // 情况2 昨日班报未出 即此时未到今日8点
        line24Statics[0] = dayjs(currentTime).subtract(2, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
        line24Statics[1] = dayjs(currentTime).subtract(1, 'day').format('YYYY-MM-DD') + ' 08:00:00' // 实际时间
      }
      // line24Statics = ['2025-05-21 08:00:00', '2025-05-22 08:00:00'] // 测试时间 todo 生产端需注释
      linesDailyStatic(this.addParam((this.addDateRange(queryStaticsParams, [line24Statics[0], line24Statics[1]])), 'sort', yieldSort)).then(response => {
        // 日报数据
        // 折合全数据
        this.currentFinalAllData = response.data.reduce(function(acc, cur) {
          // 匹配 line
          acc.push(
            [
              [{ line: cur.line }],
              [
                { name: '长泡不良', value: Number(cur.longBubbleSquare.toFixed(0)) },
                { name: '圆泡不良', value: Number(cur.roundBubbleSquare.toFixed(0)) },
                { name: '结石不良', value: Number(cur.stoneSquare.toFixed(0)) },
                { name: '上开口不良', value: Number(cur.aOpenBubbleSquare.toFixed(0)) },
                { name: '压延不良', value: Number((cur.clutterSquare + cur.bOpenBubbleSquare + cur.compressioSuqare + cur.deformationSquare).toFixed(0)) },
                { name: '其他不良', value: Number(cur.otherSquare.toFixed(0)) }
              ]
            ]
          )
          return acc
        }, [])
        // 默认线1
        const finalDataReal = this.currentFinalAllData[0][1]
        // this.currentFinalData = finalDataReal
      })
    },
    timeFn2() {
      this.timing2 = setInterval(() => {
        console.log('不良率统计 right 实时2', dayjs(new Date()).format('YYYYMMDDHHmmss'))
        this.getYieldDayCal()
      }, 120000)
    },
    timeFn1() {
      this.timing1 = setInterval(() => {
        // 轮播设置
        this.lineNum += 1
        if (this.lineNum === 6) { this.lineNum = 1 }
        const numCh = ['', '一', '二', '三', '四', '五']
        this.title = '昨日 ' + numCh[this.lineNum] + '线 不良率统计'
        // todo 测试line匹配
        this.currentFinalData = this.currentFinalAllData[this.lineNum - 1][1]
      }, 20000)
    }
  }
}
</script>

<style lang="scss" scoped>
  $box-height: 485px;
  $box-width: 100%;
  #centerLeft1 {
    padding: 20px 14px 20px 16px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;
    .bg-color-black {
      padding: 5px;
      height: $box-height - 35px;
      width: $box-width;
      border-radius: 10px;
    }
    .text {
      color: #c3cbde;
    }
    .body-box {
      border-radius: 10px;
      overflow: hidden;
      .dv-cap-chart {
        width: 90%;
        height: $box-height * 0.8;
        /*height: 270px;*/
        /*::v-deep(.unit-label) {*/
        /*  display: none;*/
        /*}*/
      }
    }
  }
</style>
